<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>


<!--section-right-->
<section class="section-right">
    <!--colligate-->
    <section class="colligate">
        <h4>
            <span>综合统计</span>
        </h4>
        <div>
            <dl>
                <dt>总订单数</dt>
                <dd>383</dd>
            </dl>
            <dl>
                <dt>用户数</dt>
                <dd>128</dd>
            </dl>
            <dl>
                <dt>油枪数</dt>
                <dd>29</dd>
            </dl>
            <dl>
                <dt>剩余短信</dt>
                <dd>104844</dd>
            </dl>
        </div>
        <h4>
            <span>支付数据</span>
        </h4>
        <div>
            <dl>
                <dt>油品净收入</dt>
                <dd>¥81166.97</dd>
            </dl>
            <dl>
                <dt>非油品净收入</dt>
                <dd>¥6206.00</dd>
            </dl>
            <dl>
                <dt>充值收入</dt>
                <dd>¥10179652.47</dd>
            </dl>
        </div>
    </section>
    <!--/colligate-->

    <!--colligate-data-->
    <section class="colligate-data">
        <div class="cg-time">
            <span class="active">最近7天</span>
            <span>最近30天</span>
        </div>
        <div class="cg-data">
            <input type="text" name="search_time" id="search_time" placeholder="查询时间" autocomplete="off" class="layui-input">
            <input type="button" value="查询" class="cg-btn-green" />
            <input type="button" value="复位" class="cg-btn-gray" />
        </div>

        <div class="cg-content" style="height: 430px">
            <p id="main2" class="cg-range">

            </p>
        </div>
        <div class="cg-container">
            <div class="layui-row layui-col-space22">
                <div class="layui-col-sm4 ">
                    <h5>订单销售汇总</h5>
                    <p id="main8" class="cg-n"></p>

                </div>
                <div class="layui-col-sm4">
                    <h5>柴油/汽油销售总量</h5>
                    <p id="main5" class="cg-n"></p>
                </div>
                <div class="layui-col-sm3">
                    <h5>手机绑定分析</h5>
                    <p id="main4" class="cg-n"></p>
                </div>
            </div>
        </div>
    </section>
    <!--/colligate-data-->
</section>
<!--/section-right-->

    <!--js-->
    <aside>
        <script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/echarts.min.js"></script>
        <script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/echartsConfig.js"></script>
        <script type="text/javascript" src="https://static.zhihuiyouzhan.com.cn/static/styles/admin/js/ec/ext.js"></script>
        <script type="text/javascript" src="../layui/layui.js"></script>
        <script type="text/javascript">
            layui.use(['form', 'jquery', 'layer', 'laydate'], function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                var form = layui.form;
                var laydate = layui.laydate;

                //选择天数
                $('.cg-time>span').bind('click', function () {
                    $(this).addClass('active').siblings().removeClass('active')
                })



                laydate.render({
                    elem: '#search_time', //指定元素
                    type: 'datetime',  //开启时间
                    range: '/'         //开启连续时间，并指定分隔符
                });

                //修改密码弹窗
                $("#open").on('click', function () {
                    layer.open({
                        type: 1,
                        area: ['450px', '400px'],
                        title: '修改密码',
                        shade: 0.6,//遮罩透明度
                        anim: 0,//0-6的动画形式，-1不开启
                        shadeClose: false, //点击遮罩关闭
                        content: '<form class="layui-form from-revise"  action="#">	'
                            + '<div class="layui-form-item">'
                            + '<div class="revise-tit">修改密码</div>'
                            + '</div>'
                            + '<div class="layui-form-item">'
                            + '<div class="layui-inline">'
                            + '<label class="layui-form-label">用户名：</label>'
                            + '<div class="layui-input-inline">'
                            + ' <input type="text" name="account" value="123" disabled="true" autocomplete="off" class="layui-input layui-form-danger layui-disabled" placeholder="123">'
                            + ' </div>'
                            + '</div>'
                            + '</div>'

                            + '<div class="layui-form-item">'
                            + '<label class="layui-form-label">密码：</label>'
                            + '<div class="layui-input-inline">'
                            + ' <input type="password" name="password" autofocus lay-verify="required|pass" id="pwd" lay-verType="tips" placeholder="请输入密码" autocomplete="off" class="layui-input">'
                            + '</div>'
                            + '</div>'
                            + ' <div class="layui-form-item">'
                            + ' <label class="layui-form-label">确认密码：</label>'
                            + '<div class="layui-input-inline">'
                            + ' <input type="password" name="password" lay-verify="required|pass|regPwd" lay-verType="tips" placeholder="请确认密码" autocomplete="off" class="layui-input">'
                            + '</div>'
                            + ' </div>'
                            + '<div class="layui-form-item">'
                            + '  <div class="layui-input-block">'
                            + ' <button class="btn-revise" lay-submit lay-filter="revise">修改密码</button>'
                            + '</div>'
                            + ' </div>'
                            + '</form>'
                    });
                    //表单验证
                    form.verify({
                        pass: [
                            /^[\S]{6,12}$/
                            , '密码必须6到12位，且不能出现空格'
                        ]
                        , regPwd: function (value) {
                            //获取密码
                            var pwd = $("#pwd").val();
                            if (value != pwd) {
                                return '两次输入的密码不一致';
                            }
                        }
                    }),
                        form.on('submit(revise)', function (data) {
                            $.ajax({
                                url: '/index.php/merchant/login/reset2.html',
                                data: data.field,
                                type: 'post',
                                datatype: 'json',
                                success: function (res) {
                                    if (res.code == 1) {
                                        layer.msg(res.msg);
                                        return;
                                    }
                                    if (res.code == 2) {
                                        layer.msg(res.msg);
                                        return;
                                    }
                                    if (res.code == 3) {
                                        layer.msg(res.msg);
                                        location.href = '/index.php/merchant/index/index.html';
                                    }
                                    if (res.code == 4) {
                                        layer.msg(res.msg);
                                        return;
                                    }
                                }
                            });
                            return false;
                        });
                });
            })




            var myChart = echarts.init(document.getElementById('main2'));
            function getColorPalette(name) {
                name = name || window.chartCfg.themeName;
                return window.chartCfg.colors;
            }

            var oldToolBox = [];
            var baseOption = {
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false,
                            optionToContent: function (opt) {
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var table = '<table style="width:100%;text-align:center"><tbody><tr>' +
                                    '<td>' + (opt.xAxis[0].name || '时间') + '</td>' +
                                    '<td>' + series[0].name + '</td>' +
                                    '<td>' + series[1].name + '</td>' +
                                    '<td>' + series[2].name + '</td>' +
                                    '<td>' + series[3].name + '</td>' +
                                    /*'<td>' + series[4].name + '</td>' +*/
                                    '</tr>';
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    table += '<tr>' +
                                        '<td>' + axisData[i] + '</td>' +
                                        '<td>' + series[0].data[i] + '</td>' +
                                        '<td>' + series[1].data[i] + '</td>' +
                                        '<td>' + series[2].data[i] + '</td>' +
                                        '<td>' + series[3].data[i] + '</td>' +
                                        /*'<td>' + series[4].data[i] + '</td>' +*/
                                        '</tr>';
                                }
                                table += '</tbody></table>';
                                return table;
                            }
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar', 'stack', 'tiled']
                        },
                        restore: {
                            show: false
                        },
                        saveAsImage: {
                            show: true
                        },
                        myShare: {
                            show: true,
                            title: 'Share',
                            name: 'share',
                            onclick: function (chart) {
                                var features = chart.option.toolbox[0].feature;

                                zrUtil.each(features, function (index, key) {
                                    //console.log(features[key]);
                                    if (features[key].name !== 'share' && features[key].show === true) {
                                        oldToolBox.push(key);
                                    }
                                });

                                //调整工具栏显示
                                zrUtil.each(features, function (index, key) {
                                    //console.log(features[key]);
                                    if (zrUtil.indexOf(oldToolBox, key) > -1) {
                                        features[key].show = !features[key].show;
                                    }
                                });

                                zrUtil.map(oldToolBox, function (item, index) {
                                    item.show = !item.show;
                                    return item;
                                });
                                //console.log(charts[2].chart);
                                shownChart.setOption({
                                    toolbox: {
                                        feature: features
                                    }
                                });
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    padding: 0,
                    extraCssText: 'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    backgroundColor: 'rgba(255,255,255,0)',
                    show: true,
                    formatter: function (params) {
                        var stl = '';
                        $(params).each(function (index, serie) {
                            if (serie.componentType === 'series' && serie.dataIndex > -1) {
                                var colors = myChart.getOption().color;
                                var color = colors[index % colors.length];
                                stl += '<br /> <div style="display:inline-block;width:10px;height:10px;border-radius:5px;background:' + color + ';"></div>&emsp;' + serie.seriesName + ':&emsp;' + serie.value;
                            }
                        });
                        return stl ? '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + (params[0] ? params[0].name : params.seriesName) + stl + '</div>' : '';
                    }
                }
            };

            /*EChart内置辅助类*/
            var zrUtil = echarts.util;
            var zrVector = echarts.vector;
            var zrMatrix = echarts.matrix;
            var zrNumber = echarts.number;
            var zrFormat = echarts.format;
            var zrGraphic = echarts.graphic;

            var opt = {
                title: {
                    text: '销售概况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增客户数量', '加油净营收', '客户积分总量', '闪付', '非油品']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: ["2018-01-26", "2018-01-27", "2018-01-28", "2018-01-29", "2018-01-30", "2018-01-31", "2018-02-01"]
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '新增客户数量',
                    type: 'line',
                    stack: '总量',
                    lineStyle: {
                        normal: {
                            smooth: true
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: function () {
                                var color = getColorPalette()[0];
                                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color.colorRgba(0).toLowerCase()
                                }, {
                                    offset: 1,
                                    color: color.colorRgba(1).toLowerCase()
                                }]);
                            }()
                        }
                    },
                    data: [0, 0, 1, 0, 1, 1, 0]
                }, {
                    name: '加油净营收',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    areaStyle: {
                        normal: {
                            color: function () {
                                var color = getColorPalette()[1];
                                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color.colorRgba(0).toLowerCase()
                                }, {
                                    offset: 1,
                                    color: color.colorRgba(1).toLowerCase()
                                }]);
                            }()
                        }
                    },
                    data: ["3486.38", "642.88", "91.48", "3349.66", "271.44", 0, 0]
                }, {
                    name: '客户积分总量',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {
                            color: function () {
                                var color = getColorPalette()[2];
                                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color.colorRgba(0).toLowerCase()
                                }, {
                                    offset: 1,
                                    color: color.colorRgba(1).toLowerCase()
                                }]);
                            }()
                        }
                    },
                    data: ["300.00", "140.00", "20.00", "786.00", "60.00", 0, 0]
                }, {
                    name: '闪付',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {
                            color: function () {
                                var color = getColorPalette()[3];
                                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color.colorRgba(0).toLowerCase()
                                }, {
                                    offset: 1,
                                    color: color.colorRgba(1).toLowerCase()
                                }]);
                            }()
                        }
                    },
                    data: [0, 0, 0, 0, 0, 0, 0]
                }, {
                    name: '非油品',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: function () {
                                var color = getColorPalette()[4];
                                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: color.colorRgba(0).toLowerCase()
                                }, {
                                    offset: 1,
                                    color: color.colorRgba(1).toLowerCase()
                                }]);
                            }()
                        }
                    },
                    data: ["3486.38", "642.88", "91.48", "3349.66", "271.44", 0, 0]
                }]
            };
            option = zrUtil.merge(opt, baseOption, false);
            myChart.setOption(option);





            var show4 = echarts.init(document.getElementById('main5'));
            option = {
                title: {
                    text: '',
                    subtext: '',
                    x: 'right'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['柴油总原价', '汽油总原价', '柴油净收入', '汽油净收入', '柴油总升数', '汽油总升数']
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '47%',
                    center: ['50%', '70%'],
                    data: [{ "value": "2233.36", "name": "\u67f4\u6cb9\u603b\u5347\u6570" }, { "value": "8740.00", "name": "\u67f4\u6cb9\u603b\u539f\u4ef7" }, { "value": "7841.84", "name": "\u67f4\u6cb9\u51c0\u6536\u5165" }, { "value": "0.00", "name": "\u6c7d\u6cb9\u603b\u5347\u6570" }, { "value": "0.00", "name": "\u6c7d\u6cb9\u603b\u539f\u4ef7" }, { "value": "0.00", "name": "\u6c7d\u6cb9\u51c0\u6536\u5165" }],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            show4.setOption(option);
            var main8 = echarts.init(document.getElementById('main8'));
            option = {
                title: {
                    text: '',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['原价总和', '收入总和', '优惠总和', '销售总升', '订单总数']
                },
                series: [
                    {
                        name: '汇总表',
                        type: 'pie',
                        radius: '47%',
                        center: ['50%', '70%'],
                        data: [{ "value": 55, "name": "\u8ba2\u5355\u603b\u6570" }, { "value": "7841.84", "name": "\u6536\u5165\u603b\u548c" }, { "value": "2233.36", "name": "\u9500\u552e\u603b\u5347" }, { "value": "907.16", "name": "\u4f18\u60e0\u603b\u548c" }, { "value": "8740.00", "name": "\u539f\u4ef7\u603b\u548c" }],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
            };
            main8.setOption(option);

            var show3 = echarts.init(document.getElementById('main4'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['手机绑定', '游客']
                },
                series: [{
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '70%'],
                    color: ['#cccccc', '#59ADF3', '#AF89D6', '#FF999A', '#FFCC67'],
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{d}%',

                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [{ "value": 21, "name": "\u624b\u673a\u7ed1\u5b9a" }, { "value": 109, "name": "\u6e38\u5ba2" }]
                }]
            };
            show3.setOption(option);
        </script>
    </aside>
    <!--js-->
    </body>
    
    </html>